<template>
  <div class="container">
    <el-header>
      <el-container>
        <el-link target="_blank" href="https://www.yuketang.cn/" type="success" style="font-size: large;">雨课堂</el-link>
        <el-divider direction="vertical" />
        <div>
          <el-link target="_blank" href="https://gitee.com/zhao-mingt/fanyi">
            <svg t="1747906462450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1471" width="20" height="20">
            <path
              d="M978.462488 409.612507H455.099994a45.512499 45.512499 0 0 0-45.512499 45.5v113.749999a45.499999 45.499999 0 0 0 45.512499 45.512499h318.624997a45.499999 45.499999 0 0 1 45.499999 45.499999v22.7625a136.524998 136.524998 0 0 1-136.524998 136.524999h-432.374995a45.512499 45.512499 0 0 1-45.5125-45.5V341.350008a136.512498 136.512498 0 0 1 136.524999-136.524998h637.062492a45.512499 45.512499 0 0 0 45.5125-45.487499l0.099999-113.749999A45.512499 45.512499 0 0 0 978.462488 0.000012H341.324996C152.824998 0.000012 0 152.825011 0 341.325008v637.137493a45.512499 45.512499 0 0 0 45.499999 45.512499h671.249992c169.662498 0 307.199996-137.499998 307.199997-307.187496V455.125007a45.512499 45.512499 0 0 0-45.5125-45.5125z m0 0"
              fill="#C71D23" p-id="1472"></path>
          </svg>
          </el-link>
        </div>
      </el-container>

    </el-header>
    <div v-if="currentQuestion">
      <h2>第{{ currentIndex + 1 }}题</h2>
      <img :src="currentQuestion.image" alt="题目图片" class="question-image" />

      <div class="options">
        <el-button v-for="(option, index) in currentQuestion.options" :key="index" @click="handleOption(option)"
          :disabled="currentQuestion.answered && currentQuestion.type === '单选题'" :class="getOptionClass(option)">
          {{ option }}
        </el-button>
      </div>

      <!-- 多选题显示提交按钮 -->
      <div v-if="currentQuestion.type === '多选题' && !answered">
        <button @click="submitMultiple" class="submit-button" :disabled="currentQuestion.userAnswer.length === 0">
          提交答案
        </button>
      </div>

      <p v-if="currentQuestion.answered">{{ currentQuestion.resultMessage }}</p>
      <el-button @click="nextQuestion" :disabled="!currentQuestion.answered">下一题</el-button>
      <el-button type="primary" @click="drawer = true">
        选题
      </el-button>
      <el-button type="primary" @click="randomQ()">
        随机一题
      </el-button>
    </div>
  </div>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <div style="padding: 20px;">
      <el-button v-for="(q, index) in questions" :key="index" style="margin: 5px;width: 65px;"
        @click="goToQuestion(index)" :type="gettype(currentIndex, index)" size="small">
        第 {{ index + 1 }} 题
      </el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="js">
  import { ref, computed, onMounted } from 'vue'
  import res from '@/assets/program.json'
  import { ElMessage } from 'element-plus'
  const questions = ref([])
  const currentIndex = ref(0)
  const selected = ref(null) // 单选
  const selectedOptions = ref([]) // 多选
  const answered = ref(false)
  const resultMessage = ref("")
  const drawer = ref(false)
  const currentQuestion = computed(() => questions.value[currentIndex.value] || null)
  const goToQuestion = (index) => {
    currentIndex.value = index
    drawer.value = false // 选中后自动关闭 drawer
    answered.value = false
    selectedOptions.value = []
  }
  const randomQ = () => {
    const unansweredQuestions = questions.value
      .map((value, index) => {
        if (!value.answered) {
          return index;
        }
        return -1;
      })
      .filter(index => index !== -1);
    console.log(unansweredQuestions)
    if (unansweredQuestions.length > 0) {
      const randomIndex = unansweredQuestions[Math.floor(Math.random() * unansweredQuestions.length)]
      currentIndex.value = randomIndex
      answered.value = false
      return
    }
    else {
      ElMessage({
        message: '已经做完所有题目',
        type: 'warning',
        plain: true,
      })
    }
  }
  const gettype = (currentIndex, index) => {
    if (currentIndex === index) {
      return 'primary'
    }
    else {
      if (questions.value[index].answered) {
        if (questions.value[index].right) {
          return 'success'
        }
        else {
          return 'danger'
        }
      }
      else {
        return 'info'
      }
    }
  }
  const handleOption = (option) => {
    if (currentQuestion.value.type === '多选题') {
      if (currentQuestion.value.userAnswer.includes(option)) {
        console.log("aa")
        currentQuestion.value.userAnswer = currentQuestion.value.userAnswer.filter(o => o !== option)
        console.log(currentQuestion.value.userAnswer)
      } else {
        console.log("ada")
        currentQuestion.value.userAnswer.push(option)
        console.log(currentQuestion.value.userAnswer)
      }
    } else {
      currentQuestion.value.userAnswer.push(option)
      console.log(currentQuestion.value.userAnswer)
      currentQuestion.value.answered = true
      console.log(option, "das", currentQuestion.value.answer[0])
      currentQuestion.value.right = option === currentQuestion.value.answer[0]
      currentQuestion.value.resultMessage =
        option === currentQuestion.value.answer[0]
          ? '✅ 正确！' + currentQuestion.value.answer
          : '❌ 错误，正确答案是 ' + currentQuestion.value.answer
    }
  }

  const submitMultiple = () => {
    currentQuestion.value.answered = true
    const correct = arraysEqual(
      currentQuestion.value.userAnswer.sort(),
      currentQuestion.value.answer.sort()
    )
    currentQuestion.value.right = correct
    currentQuestion.value.resultMessage = correct ? '✅ 正确！' : '❌ 错误，正确答案是 ' + currentQuestion.value.answer.join('、')
  }

  const arraysEqual = (a, b) => {
    return a.length === b.length && a.every((val, i) => val === b[i])
  }

  const getOptionClass = (option) => {
    if (!currentQuestion.value.answered) {
      return {
        selected: currentQuestion.value.userAnswer.includes(option)
      }
    }

    if (currentQuestion.value.type === '多选题') {
      const isCorrect = currentQuestion.value.answer.includes(option)
      const wasSelected = currentQuestion.value.userAnswer.includes(option)
      return {
        correct: isCorrect,
        wrong: wasSelected && !isCorrect
      }
    } else {
      return {
        correct: option === currentQuestion.value.answer[0],
        wrong: option === currentQuestion.value.userAnswer[0] && option !== currentQuestion.value.answer[0]
      }
    }
  }

  const nextQuestion = () => {
    if (currentIndex.value < questions.value.length - 1) {
      currentIndex.value++
      selected.value = null
      selectedOptions.value = []
      answered.value = false
    } else {
      ElMessage({
        message: '已经是最后一题',
        type: 'warning',
        plain: true,
      })
    }
  }

  onMounted(() => {
    res.units.forEach((unit, index) => {
      questions.value.push(...unit.questions)
    })
    questions.value.forEach((q, index) => {
      q.answered = false
      q.userAnswer = []
      q.resultMessage = ""
      q.right = false
    })
    // questions.value = res.units[7].questions
  })
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .question-image {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
  }

  .options {
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;
    gap: 12px;
  }

  .options button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 0 !important;
  }

  .selected {
    background-color: #cce5ff;
    border: 1px solid #007bff;
  }

  .correct {
    background-color: #d4edda;
    border: 1px solid #28a745;
  }

  .wrong {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
  }

  .submit-button,
  .next-button {
    margin-top: 20px;
    padding: 10px 20px;
  }
</style>
